<template>
  <el-card
    class="box-card"
    shadow="never"
    style="width: 100%"
    :style="{ height: height + 'px' }"
  >
    <div class="chart-box" ref="more" :style="{ height: height + 'px' }"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'MorepieView',
  props: {
    height: {
      type: Number,
      default: 400
    }
  },
  data () {
    return {}
  },
  methods: {},
  mounted () {
    const myChart = echarts.init(this.$refs.more)
    const option = {
      title: [
        {
          text: '设备系统访问情况',
          top: '2px',
          left: '2px',
          textStyle: {
            color: '#6c757d',
            fontWeight: 400
          }
        },
        {
          subtext: 'os',
          top: '40%',
          left: '46%',
          subtextStyle: {
            color: '#000',
            fontSize: '26px'
          }
        },
        {
          subtext: '8541',
          top: '52%',
          left: '45%',
          subtextStyle: {
            fontSize: '18px'
          }
        }
      ],
      series: [
        {
          type: 'pie',
          radius: ['75%', '80%'],
          avoidLabelOverlap: true,
          labelLine: {
            show: false
          },
          data: [
            {
              value: 4.5,
              itemStyle: {
                color: '#858ef5'
              }
            },
            {
              value: 5.5,
              itemStyle: {
                color: '#f4f4f4'
              }
            }
          ]
        },
        {
          type: 'pie',
          radius: ['65%', '70%'],
          avoidLabelOverlap: true,
          labelLine: {
            show: false
          },
          data: [
            {
              value: 5.5,
              itemStyle: {
                color: '#2dd5a5'
              }
            },
            {
              value: 4.5,
              itemStyle: {
                color: '#f4f4f4'
              }
            }
          ]
        },
        {
          type: 'pie',
          radius: ['55%', '60%'],
          avoidLabelOverlap: true,
          labelLine: {
            show: false
          },
          data: [
            {
              value: 6.5,
              itemStyle: {
                color: '#f9738e'
              }
            },
            {
              value: 3.5,
              itemStyle: {
                color: '#f4f4f4'
              }
            }
          ]
        },
        {
          type: 'pie',
          radius: ['45%', '50%'],
          color: ['#c00000', '#d3d3d3'],
          avoidLabelOverlap: true,
          labelLine: {
            show: false
          },
          data: [
            {
              value: 8,
              itemStyle: {
                color: '#fdc424'
              }
            },
            {
              value: 2,
              itemStyle: {
                color: '#f4f4f4'
              }
            }
          ]
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style lang="less" scoped></style>
